<template>
	<div>
		<myBreadcrumb :breadcrumbData="breadcrumbData"></myBreadcrumb>
		<!-- 卡片视图区域 -->
		<el-card shadow="always" :body-style="{ padding: '10px' }">
			<div class="mask">
				<el-row :gutter="20" style="height: 100%">
					<el-col :span="12" style="height: 100%; overflow: hidden">
						<el-row :gutter="20">
							<el-col :span="24">
								<mySearch
									:searchType="this.searchType"
									:handleSearchSelectInputChange="
										this.handleSearchSelectInputChange
									"
									:searchTypeOptions="this.searchTypeOptions"
									:searchTypePlaceholder="
										this.searchTypePlaceholder
									"
									:searchInputKey="this.searchInputKey"
									:searchInputChange="this.searchInputChange"
								></mySearch>
							</el-col>
						</el-row>

						<el-container style="height: 100%">
							<el-table
								:data="userList"
								stripe
								sortable
								style="width: 100%"
								highlight-current-row
								@current-change="handleCurrentChange"
							>
								<el-table-column
									prop="isAdmin"
									label="admin"
									width="90"
									sortable
								>
									<template slot-scope="scope">
										<i
											style="color: red"
											v-if="scope.row.admin == 0"
											class="el-icon-error"
										></i>
										<i
											style="color: green"
											v-if="scope.row.admin == 1"
											class="el-icon-s-check"
										></i>
									</template>
								</el-table-column>
								<el-table-column
									prop="username"
									label="用户姓名"
									width="180"
									sortable
								>
								</el-table-column>
								<el-table-column
									prop="college"
									label="学院单位"
									sortable
								>
								</el-table-column>
								<el-table-column
									prop="position"
									label="职位"
									sortable
								>
								</el-table-column>
								<el-table-column
									prop="isLogin"
									label="审批"
									width="90"
									sortable
								>
									<template slot-scope="scope">
										<i
											style="color: red"
											v-if="scope.row.isLogin == 0"
											class="el-icon-s-opportunity"
										></i>
										<i
											style="color: green"
											v-if="scope.row.isLogin == 1"
											class="el-icon-s-opportunity"
										></i>
									</template>
								</el-table-column>
							</el-table>
							<el-footer height="60px">
								<myPagination
									:sizeChange="sizeChange"
									:currentChange="currentChange"
									:queryInfo="queryInfo"
									:total="total"
								></myPagination>
							</el-footer>
						</el-container>
					</el-col>
					<el-col :span="12" class="registerCol">
						<el-container style="height: 100%">
							<el-header
								style="height: 12%"
								class="registerTitle"
							>
								<!-- Header content -->
								注册管理
							</el-header>
							<el-container
								class="registerContainer"
								v-show="registerContainerIsShow"
							>
								<span>
									审批状态：<el-switch
										v-show="registerContainerIsShow"
										v-model="crewEditData.isLogin"
										active-color="#13ce66"
										inactive-color="#ff4949"
										active-text="通过"
										inactive-text="拒绝"
										@change="changeUserIsLogin"
									>
									</el-switch
								></span>
								<span>
									<el-tooltip
										class="item"
										effect="dark"
										content="删除用户"
										placement="bottom"
										:open-delay="500"
									>
										<el-button
											type="danger"
											icon="el-icon-delete"
											circle
											@click="deleteUser"
										></el-button>
									</el-tooltip>
								</span>
							</el-container>
						</el-container>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script>
import myBreadcrumb from '../../components/myBreadcrumb.vue';
import myPagination from '../../components/myPagination.vue';
import mySearch from '../../components/mySearch.vue';

export default {
	name: 'myCrewManage',
	components: {
		myBreadcrumb,
		myPagination,
		mySearch,
	},
	data() {
		return {
			queryInfo: {
				query: '',
				// 当前的页数
				pagenum: 1,
				// 当前每页显示多少条数据
				pagesize: 10,
			},
			total: 0,
			userList: [],
			breadcrumbData: ['用户管理', '人员管理'],
			crewEditData: [],
			// 搜索placeholder
			searchType: 'username',
			searchInputKey: '',
			searchTypePlaceholder: '搜索用户姓名',
			searchTypeOptions: [
				{
					value: 'username',
					label: '用户姓名',
				},
				{
					value: 'college',
					label: '学院单位',
				},
				{
					value: 'position',
					label: '职位',
				},
			],
			// 控制注册管理box显示
			registerContainerIsShow: false,
		};
	},
	methods: {
		async getUserList() {
			this.$axios
				.get('admin/crewManage', {
					params: {
						queryInfo: this.queryInfo,
						searchType: this.searchType,
					},
				})
				.then(({ data: res }) => {
					if (res.status !== 200) {
						return this.$message.error('获取用户列表失败');
					}
					// console.log(res);
					res.data.forEach((item) => {
						item.isLogin = item.isLogin == '1' ? true : false;
					});
					this.userList = res.data;
					this.total = res.total;
				});
		},
		sizeChange(newSize) {
			this.queryInfo.pagesize = newSize;
			this.getUserList();
		},
		currentChange(newPage) {
			this.queryInfo.pagenum = newPage;
			this.getUserList();
		},
		// 表格点击事件
		handleCurrentChange(val) {
			this.crewEditData = val;
			!this.registerContainerIsShow &&
				(this.registerContainerIsShow = true);
		},
		// 搜索
		handleSearchSelectInputChange(val) {
			try {
				this.searchTypeOptions.forEach((item) => {
					if (item.value == val) {
						this.searchTypePlaceholder = `搜索${item.label}`;
						this.searchType = item.value;
						throw new Error('');
					}
				});
			} catch (err) {}
		},
		async searchInputChange(val) {
			this.searchInputKey = '';
			this.searchInputKey += val;
			this.queryInfo.query = this.searchInputKey.trim();
			console.log('searchInputChange');
			console.log(this.searchType, this.searchInputKey);
			this.getUserList();
		},
		// 改变用户isLogin
		async changeUserIsLogin(val) {
			// console.log(val);
			const { data: res } = await this.$axios.put('/admin/crewManage', {
				data: {
					deleteUserId: this.crewEditData.id,
					isLogin: val,
				},
			});
			if (res.status !== 200) {
				this.$message({
					type: 'success',
					message: '审批失败!',
				});
			}
		},
		deleteUser() {
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					this.registerContainerIsShow = false;
					const { data: res } = await this.$axios.delete(
						'/admin/crewManage',
						{
							params: {
								deleteUserId: this.crewEditData.id,
							},
						}
					);

					if (res.status == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.$forceUpdate();
						this.$router.go(0);
					}
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
	},
	mounted() {
		this.getUserList();
	},
};
</script>

<style lang="less" scoped>
.mask {
	width: 100%;
	height: 82vh;
}
.registerCol {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	height: 100%;
}
.registerTitle {
	font-size: 26px;
	text-align: center;
}
.registerContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 92%;
	animation: registerContainerAni 1s forwards;
	> span {
		transform: scale(2);
		height: 100px;
		transition: all 0.4s;
		transform-origin: center center;
		&:nth-of-type(2):hover {
			transform: scale(2.1);
		}
	}
}

@keyframes registerContainerAni {
	0% {
		transform: scale(1.1);
	}
	30% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

// /deep/.el-select {
//   width: 500px;
// }

// /deep/.el-input {
//   width: 200px;
// }

/deep/.searchBox .mask {
	width: 100%;
}
</style>
